我正在将现有的 React 应用程序集成到 Next.js 中,主要用于 SEO 功能。
我将 css 文件链接粘贴到 <Header>
标签内的 Next.js
中,它们似乎工作得很好。当我尝试使用 <script>
标记对 javascript 文件执行相同操作时,它不会执行这些脚本内的代码。但我可以在 chrome 开发工具中看到它们加载了 http 200
。
我尝试使用 Loadjs
中名为 npm
的库来加载 componentDidMount
内的脚本,但得到的结果与使用 <script>
标签完全相同。
有没有正确的方法可以在 Next.js
中做我不知道的简单事情?
这是 pages/index.js
文件中包含的代码。
import React from "react"
import Head from 'next/head'
import MyAwesomeComponent from "../components/mycomponent.js"
export default () => (
<div>
<Head>
<link type="text/css" rel="stylesheet" href="static/css/chatwidget.css" />
<link type="text/css" rel="stylesheet" href="static/css/download.css" />
<script type="text/javascript" src="static/libs/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/malihu-custom-scrollbar-plugin@3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="static/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="static/libs/owl.carousel.min.js"></script>
<script type="text/javascript" src="static/scripts/chatHead.js"></script>
<script type="text/javascript" src="static/libs/jquery.magnific-popup.js"></script>
</Head>
<MyAwesomeComponent /> {/* a simple React component that returns : <p>Hello World </p>*/}
</div>
)
<小时/>
抱歉回复晚了。
事实证明,我链接的所有 scripts
都错过了一个实际上会为每个操作运行 functions
的脚本。
最佳答案
这对我有用:
为静态文件创建一个文件夹:
<root>/public/static/script.js
在你的index.js中<root>/pages/index.js
import Head from 'next/head';
import MyAwesomeComponent from '../components/mycomponent';
export default () => (
<div>
<Head>
<script type="text/javascript" src="/static/script.js"></script>
</Head>
<MyAwesomeComponent />
</div>
)
请注意static
是我在本示例中使用的名称,这不是必需的,它可以与任何其他文件夹名称一起使用。
关于javascript - Next.js 加载 <script> 标签但不执行它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54067291/