admin管理员组

文章数量:1313347

When my Next JS app is piled, it generates a list of script files to include like this.

<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/mons.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.

When my Next JS app is piled, it generates a list of script files to include like this.

<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/mons.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.

  • javascript
  • webpack
  • next.js
Share Improve this question edited Mar 17, 2021 at 18:01 juliomalves 50.4k23 gold badges177 silver badges168 bronze badges asked Mar 17, 2021 at 12:45 elMarquiselMarquis 7,7404 gold badges40 silver badges43 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

From Next.js 11

You'll need to extend and modify getScripts from the Head class in your _document.js file instead.

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

Before Next.js 11

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.

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

本文标签： javascriptNext JS add data attributes to script tagsStack Overflow

版权声明：本文标题：javascript - Next JS add data attributes to script tags - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741870266a2402150.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。