Enhance the script tags in Next JS by incorporating data attributes

Question

Enhance the script tags in Next JS by incorporating data attributes

After compiling my Next JS app, it creates a list of script files for inclusion in the following format.

<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 am looking to insert a custom data attribute into certain scripts as shown below.

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

I have been investigating ways to achieve this in the next.config.js file since I understand that webpack overrides can be implemented there, but so far, I haven't found a method to include data attributes in dynamically generated js files like these.

javascript webpack next.js

Answer 1

Answer №1

Implementing in Next.js 11

To implement this feature in Next.js 11, you will need to extend and modify the getScripts method from the Head class within your _document.js file.

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

In Previous Versions of Next.js

If you are using a version of Next.js before 11, an alternative approach is to extend the NextScript class within your _document.js file. This allows you to include custom data-* attributes in the generated scripts 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

Answer 2

Implementing in Next.js 11

To implement this feature in Next.js 11, you will need to extend and modify the getScripts method from the Head class within your _document.js file.

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

In Previous Versions of Next.js

If you are using a version of Next.js before 11, an alternative approach is to extend the NextScript class within your _document.js file. This allows you to include custom data-* attributes in the generated scripts 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

Enhance the script tags in Next JS by incorporating data attributes

Answer №1

Implementing in Next.js 11

In Previous Versions of Next.js

Similar questions

The ng-app directive for the Angular project was exclusively located in the vendor.bundle.js.map file

Exploring Vue.js: Navigating through child components from parent component

Struggling to generate an HTML table using JSON data

Clicking buttons in AngularJS

How can I efficiently display three items per click when tapping into jQuery data?

What is the best way to implement session timeout specifically for inactive users?

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

Developing HTML5 animation by utilizing sprite sheets

Exploring the capabilities of arrays within Ajax

Locate components within the Data object of jQuery's .get() method

Having trouble decoding audio data in JavaScript Web Audio?

Mapbox GL JS stops displaying layers once a specific zoom level or distance threshold is reached

Implement the static middleware to host static files using express

Positioning Images at the Top of the Screen in React Native

Syntax for the expression used in the ng-click directive

The functionality of the OnClientClick event within the ASP.NET platform

Using this functionality on a ReactJS Functional Component

Update the class of the appropriate navigation tab when the corresponding div is scrolled into view

I am encountering an error that states: UnhandledPromiseRejectionWarning: TypeError: Unable to retrieve the property 'buffer' as it is undefined

Understanding Variable Scope in JavaScript: How Variables are Accessed in Different Functions