Next JS 給腳本標簽添加數據屬性

Question

當我的 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 文件的方法。

Answer 1

另一種解決方案是在您的_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

Next JS 給腳本標簽添加數據屬性

問題描述

1 個解決方案

解決方案1
2 已采納 2021-03-20 17:48:15

Next JS 給腳本標簽添加數據屬性

問題描述

1 個解決方案

解決方案1 2 已采納 2021-03-20 17:48:15

解決方案1
2 已采納 2021-03-20 17:48:15