title: Dynamically add a variable to an external js script with NextJS
body: <p>I have this external hotjar script inside <code>/static/js</code> of my <code>nextjs</code> application.</p>
  
  <pre><code>(function(h,o,t,j,a,r){
          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
          h._hjSettings={hjid:&lt;SITEID&gt;,hjsv:6};
          a=o.getElementsByTagName('head')[0];
          r=o.createElement('script');r.async=1;
          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
          a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  </code></pre>
  
  <p>I have imported this file into my app from inside the <code>Head</code> section of <code>_document.js</code> like so:
  <code>&lt;script src={'/js/hotjar.js'} &gt;&lt;/script&gt;</code></p>
  
  <p><strong>Problem:</strong>
  My Nextjs app is currently running on a staging and live environment and I would like to add a script for both. The only dynamic part of the script above is the <code>SITEID</code> value here <code>h._hjSettings={hjid:&lt;SITEID&gt;,hjsv:6};</code>. How can I add different <code>SITEID</code>s for different environments inside a config file and dynamically change this value since this script runs on the client side?</p>