script tag with Dynamic variables in Next.js

Question

I'd like to add Google Analytics and Google Tag Manager on my web.

I'm trying to separate it as stages. (dev, prod)

_document.tsx

import Document, {Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document{
  render(){
    return (
      <html>
        <Head>
          {/* ... */}
          <script async src="http://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
          {/* ... */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

What I expect

<script async src=`http://www.googletagmanager.com/gtag/js?id=${process.env.GTM_CONTAINER_ID}`></script>

I wanna use like above that.

hangindev.com · Accepted Answer · 2020-06-12 05:43:21Z

3

Just like normal JSX, you use curly braces to embed a JavaScript expression in an attribute.

<script async src={`http://www.googletagmanager.com/gtag/js?id=${process.env.GTM_CONTAINER_ID}`}/>

answered Jun 12, 2020 at 5:43

hangindev.com

4,89214 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kyun Over a year ago

I've just forgotten it temporally. Thank you :)

hangindev.com Over a year ago

No worries. I had the same question before.

Collectives™ on Stack Overflow

script tag with Dynamic variables in Next.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related