Next JS 给脚本标签添加数据属性答案

【问题标题】：Next JS add data attributes to script tagsNext JS 给脚本标签添加数据属性
【发布时间】：2021-06-14 19:22:03
【问题描述】：

当我的 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>

我想像这样为其中一些添加自定义数据属性。

<script data-cookieconsent="ignore" src="/_next/static/chunks/pages/%5B%5B...path%5D%5D-1234.js" async=""></script>

我已经探索过尝试在 next.config.js 文件中执行此操作，因为我知道可以在其中进行 webpack 覆盖，但我没有看到将数据属性添加到像这样动态生成的 js 文件的方法.

【问题讨论】：

标签： javascript webpack next.js

【解决方案1】：

来自 Next.js 11

您需要从 _document.js 文件中的 Head 类扩展和修改 getScripts。

import Document, { Html, Head, Main, NextScript } from 'next/document'

class CustomHead extends Head {
    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>
                <CustomHead cookieconsent="ignore" />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default CustomDocument

在 Next.js 11 之前

另一种解决方案是在您的_document.js 文件中扩展NextScript 类，以便在Next.js 生成的脚本中包含您的自定义data-* 属性。

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

【讨论】：

智能解决方案。谢谢