How to use Next/Head to render a script

Question

As I understand from my SO question , I can use next/head to embed a script tag within a component of my React / Next JS app. So, I went about it as such:

import React, { Component } from "react";
...
import Head from "next/head";
export const Lead = props => {
  return (
...
        <Head>
          <script
            class="3758abc"
            type="text/javascript"
            src="https://cdn2.fake.com/Scripts/embed-button.min.js"
            data-encoded="1234sdkljfeiASD9A"
          ></script>
        </Head>
...
  );
};

Unfortunately, nothing rendered. I don't know if I'm missing something obvious here... I'm using Next 9.1.7.

My _app.js looks like this:


import App, { Container } from "next/app";
import Page from "../components/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps };
  }
  render() {
    const { Component, apollo, pageProps } = this.props;

    return (
      // <Container>
      <ApolloProvider client={apollo}>
        <Page>
          <Component {...pageProps} />
        </Page>
      </ApolloProvider>
      // </Container>
    );
  }
}

export default withData(MyApp);

And my _document looks like this:


import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static getInitialProps = async ctx => {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  };
}

might be related to https://github.com/vercel/next.js/issues/11012, there was a PR which solved? it, one week ago, not yet released, except in canary build. — einSelbst, Sep 15 '20 at 12:17

score 2 · Answer 1 · answered Mar 30 '20 at 02:00

in your _document.js, try to add script below <NextScript /> tag

<body>
   <Main />
   <NextScript />
   <script
        class="3758abc"
        type="text/javascript"
        src="https://cdn2.fake.com/Scripts/embed-button.min.js"
        data-encoded="1234sdkljfeiASD9A"></script>
</body>

James Hooper · Answer 2 · 2021-06-25T16:34:55.223

I've been working on a similar issue.

I tried the answer above that places the <script> tag within the <body>, but unfortunately it also rendered the contents generated by the <script> tag to the DOM (as in, it ran the script correctly but also stored all the extra data from it at the bottom of the <body> tag).

I also tried wrapping the script within a <Head> component from next/head (still inside the body), which prevented the DOM rendering, but that fix didn't run the script at all.

In the end, what worked for my use case was moving the script loading into the _app.js file: it runs the script correctly without rendering extra stuff to the DOM. It looks like this:

import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <React.Fragment>
      <Head>
        <script
          id="my-script"
          src="https://scriptsource.com/script"
          type="text/javascript"
        ></script>
      </Head>

      <LayoutComponent {...pageProps}>
        <Component {...pageProps} />
      </LayoutComponent>
    </React.Fragment>
  );
}

export default MyApp;

I don't know if this solution causes any undesirable effects that I don't know about, but so far it has fixed my issue.

UPDATE (June 2021)

As Ahmed noted below, there are some side effects to the solution I wrote above. What I noticed was that the image loading was being blocked by the script executing.

I saw that Next 11 had just been released, which included the new <Script> tag for this purpose.

I moved all the props into the tag, set strategy="beforeInteractive" and then put this tag into the Page component directly; now everything is running exactly as expected.

Here are the docs for the Next 11 Script tag: https://nextjs.org/docs/basic-features/script

it shouldn’t be added to `_app`. Then the `noscript` doesn’t work correctly! — Ahmed Abdulrahman, Apr 22 '21 at 09:04
@AhmedAbdulrahman would you be so kind to advise where do you suggest to add the script when you want it to be available to all the app components? — RandomDeveloper, Sep 06 '21 at 12:47

How to use Next/Head to render a script

2 Answers2

Linked