Sha*_*rif 2 javascript reactjs next.js
我正在将现有的React应用程序集成到Next.js中，主要用于SEO功能。
我在<Header>标签中粘贴了css文件链接Next.js，它们似乎工作得很好。当我尝试使用<script>标记对javascript文件执行相同操作时，它不会在这些脚本内执行代码。但我可以http 200在chrome dev工具中看到它们。
我尝试使用名为Loadjsfrom 的库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为每个操作运行的脚本。
Joh*_*ner 19
使用下面的方法，您可以轻松地将脚本文件的原始脚本文本放入生成的 Next.js HTML 页面中，<head>而无需担心字符转义、格式化和一般假装我们实际上并没有最终构建一个 HTML 页面。
有许多用例您可能希望脚本在不连接网络的情况下运行。例如：第 3 方脚本、监控/分析脚本，它们希望在<head>没有单独网络负载的情况下使用。其中许多都被缩小，损坏，你能说出它的名字，并且应该是复制，粘贴，继续生活。
Next.js 很难假装 Web 开发的一切都是神奇的 React 和 Webpack（我希望对吗？）
我发现的最好的开发人员体验方式是这样做：
_document.js
...
<Head>
<script type="text/javascript" dangerouslySetInnerHTML={{ __html: process.env.rawJsFromFile }}></script>
</Head>
...
下一个.config.js
https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L33
module.exports = {
env: {
rawJsFromFile: fs.readFileSync('./rawJsFromFile.js').toString()
}
}
rawJsFromFile.js
alert('Freedom!!!!!!!!!!!!!!!');
// and other 3rd party script junk, heck even minified JS is fine too if you need
希望这能让某人免于我忍受了数小时的沮丧……
May*_*abi 13
你也可以运行js代码这个
<script
dangerouslySetInnerHTML={{
__html: `
let a = 1;
functionCall();
`,
}}
></script>Ded*_*Dev 10
在 Next.js v11 及更高版本中，您可以使用 Next 组件Script
https://nextjs.org/blog/next-11#script-optimization
<Script
src="..."
strategy="beforeInteractive"
/>
这对我有效：
为您的静态文件创建一个文件夹：
<root>/static/hello.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/hello.js"></script>
</Head>
<MyAwesomeComponent />
</div>
)
希望有帮助，
问候
| 归档时间： |
|
| 查看次数： |
5408 次 |
| 最近记录： |