Next.js 加载<脚本>标签，但它不执行它们 [英] Next.js Loads <script> tags but it doesn't execute them
问题描述
我正在将现有的 React 应用程序集成到 Next.js 中，主要用于 SEO 功能.
我在 Next.js 的 <Header> 标记内粘贴了 css 文件链接，它们似乎工作得很好.当我尝试使用 <script> 标记对 javascript 文件执行相同操作时，它不会执行这些脚本中的代码.但我可以在 chrome 开发工具中看到它们加载了 http 200.
我尝试使用 npm 中名为 Loadjs 的库来加载 componentDidMount 中的脚本，但我得到的结果与使用 完全相同><script> 标签.
在我不知道的 Next.js 中有没有合适的方法来做这么简单的事情?
这是 pages/index.js 文件中包含的代码.
从react"导入 React从下一个/头"导入头从../components/mycomponent.js"导入 MyAwesomeComponent导出默认 () =>(<头><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 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></头><MyAwesomeComponent/>{/* 一个简单的 React 组件，它返回:<p>Hello World </p>*/}</div>)<小时>
抱歉回复晚了.事实证明，我链接的所有 scripts 都错过了一个脚本，该脚本实际上会为每个操作运行 functions.
解决方案 这对我有用:
为您的静态文件创建一个文件夹:
<root>/static/hello.js
在你的 index.js 中
<root>/pages/index.js
从'next/head'导入头部；从'../components/mycomponent'导入MyAwesomeComponent；导出默认 () =>(<头><script type="text/javascript" src="/static/hello.js"></script></头><MyAwesomeComponent/></div>)希望对您有所帮助，
问候
I'm integrating an existing React app into Next.js for mainly SEO features.
i pasted the css files links inside the <Header> tag in Next.js and 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 200 in the chrome dev tools.
I tried using a library called Loadjs from npm to load the scripts inside componentDidMount but i got the exact same result as using <script> tag.
is there a proper way to do such simple thing in Next.js that i'm not aware of ?
Here's the code included in the pages/index.js file.
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>
)
Sorry for the late answer.
it turned out that all the scripts i linked missed one script that would actually run the functions for each action.
解决方案 This works to me:
Create a folder for your static files:
<root>/static/hello.js
in your 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
这篇关于Next.js 加载<脚本>标签，但它不执行它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
