javascript Next.js 加载 <script> 标签但不执行它们
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54067291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Next.js Loads <script> tags but it doesn't execute them
提问by Sharl Sherif
I'm integrating an existing React app into Next.js for mainly SEO features.
我正在将现有的 React 应用程序集成到 Next.js 中，主要用于 SEO 功能。
i pasted the css files links inside the <Header>tag in Next.jsand they seem to work just fine. when i tried to do the same with the javascript files using the <script>tag, it doesn't execute the code inside those scripts. but i can see them loaded with http 200in the chrome dev tools.
我粘贴了<Header>标签内的 css 文件链接Next.js，它们似乎工作得很好。当我尝试使用<script>标记对 javascript 文件执行相同操作时，它不会执行这些脚本中的代码。但我可以看到它们已加载http 200到 chrome 开发工具中。
I tried using a library called Loadjsfrom npmto load the scripts inside componentDidMountbut i got the exact same result as using <script>tag.
我尝试使用一个名为Loadjsfrom的库npm来加载其中的脚本，componentDidMount但得到的结果与使用<script>tag完全相同。
is there a proper way to do such simple thing in Next.jsthat i'm not aware of ?
有没有正确的方法来做Next.js我不知道的这么简单的事情？
Here's the code included in the pages/index.jsfile.
这是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/[email protected]/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>
)
Sorry for the late answer.
it turned out that all the scriptsi linked missed one script that would actually run the functionsfor each action.
抱歉回复晚了。事实证明，scripts我链接的所有内容都错过了一个脚本，该脚本实际上会functions为每个操作运行。
回答by masmerino
This works to me:
这对我有用：
Create a folder for your static files:
为您的静态文件创建一个文件夹：
<root>/static/hello.js
<root>/static/hello.js
in your index.js
在你的 index.js 中
<root>/pages/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/hello.js"></script>
</Head>
<MyAwesomeComponent />
</div>
)
Hope this help,
希望这有帮助，
Regards
问候
回答by Parth Bambhaniya
May this helps you Nextjs public folder
可以帮助您Nextjs 公共文件夹
Move your static folder into public folder in your root directory
将您的静态文件夹移动到根目录中的公用文件夹中
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>
...
</Head>
<MyAwesomeComponent />
</div>
)
回答by Maysam Torabi
You can also run js code this
你也可以运行js代码这个
<script
dangerouslySetInnerHTML={{
__html: `
let a = 1;
functionCall();
`,
}}
></script>