我正在使用 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",
“ react ”:“^16.8.4”，
“ react 域”:“^16.8.4”
最佳答案
Head标签。 Head标签。将其放在一个单独的文件中，并将脚本导入 Head标签 您可以创建
.js包含原始 js 代码的文件，位于 public文件夹，然后使用 Head 中的脚本标签。我不确定为什么我们必须这样做，但这就是它在 Next.js 中的工作方式因此，对于您的问题，这将起作用:
public/js/myscript.jsdocument.getElementById("demo").innerHTML = "Hello JavaScript";
Layout.jsimport 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;
关于javascript - Next.JS 用 <script> 实现外部 ".js"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55165852/