Next JS 给脚本标签添加数据属性
[英]Next JS add data attributes to script tags
问题描述
When my Next JS app is compiled, it generates a list of script files to include like this.
当我的 Next JS 应用程序被编译时，它会生成一个包含这样的脚本文件列表。
<script src="/_next/static/chunks/main-1234.js" async=""></script>
<script src="/_next/static/chunks/webpack-1234.js" async=""></script>
<script src="/_next/static/chunks/framework.1234.js" async=""></script>
<script src="/_next/static/chunks/1234.5678.js" async=""></script>
<script src="/_next/static/chunks/commons.1234.js" async=""></script>
<script src="/_next/static/chunks/pages/_app-1234.js" async=""></script>
<script src="/_next/static/chunks/1234.5678.js" async=""></script>
<script src="/_next/static/chunks/pages/%5B%5B...path%5D%5D-1234.js" async=""></script>
<script src="/_next/static/1234/_buildManifest.js" async=""></script>
<script src="/_next/static/1234/_ssgManifest.js" async=""></script>
I want to add a custom data attribute to some of them like this.我想像这样向其中一些添加自定义数据属性。
<script data-cookieconsent="ignore" src="/_next/static/chunks/pages/%5B%5B...path%5D%5D-1234.js" async=""></script>
I've explored trying to do this in the next.config.js file as I know it's possible to make webpack overrides in there, but I'm not seeing a way to add data attributes to dynamically generated js files like this.我已经探索过尝试在 next.config.js 文件中执行此操作，因为我知道可以在其中进行 webpack 覆盖，但我没有看到将数据属性添加到动态生成的 js 文件的方法。
1 个解决方案
解决方案1
2 已采纳 2021-03-20 17:48:15
An alternative solution is to extend the NextScript class in your _document.js file, as to include your custom data-* attribute in the scripts generated by Next.js.另一种解决方案是在您的_document.js文件中扩展NextScript class，以便在 Next.js 生成的脚本中包含您的自定义data-*属性。
// /pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class CustomNextScript extends NextScript {
getScripts(files) {
const originalScripts = super.getScripts(files);
return originalScripts.map((script) => {
return React.cloneElement(script, {
'data-cookieconsent': this.props.cookieConsent
});
});
}
}
class CustomDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<CustomNextScript cookieConsent="ignore" />
</body>
</Html>
)
}
}
export default CustomDocument
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.