title: Insert different scripts based on environment in Next.js at runtime
body: <p>I want to insert a script in my application's <code>&lt;head&gt;</code>, but the src attribute of that script depends on a runtime environment variable in my hosting server (OpenShift).</p>
  <p>So if <code>process.env.ENVIRONMENT === &quot;test&quot;</code>, I want to insert <code>&lt;script src=&quot;www.someurl.com/test.js&quot; /&gt;</code> into the application's <code>&lt;head&gt;</code> and if it's &quot;prod&quot; then something else.</p>
  <p>I have all these src values stored in a json file that I don't want to show up in the client. How do I make sure the client can receive the correct src from the server without having access to the json file with all the environment's endpoints?</p>
  <p><strong>Express:</strong>
  With Express I used to just inject the src value into the window object at runtime before serving <code>index.html</code> but I'm not sure how to do it in Next.js</p>
  <p><strong>Code:</strong> Here's what I tried</p>
  <pre><code>// _app.tsx
  ...
        &lt;Head&gt;
          &lt;script src={getScript()} type=&quot;text/javascript&quot; /&gt;
        &lt;/Head&gt;
  ...
  </code></pre>
  <p>where <code>getScript()</code> is a function in <code>&lt;root&gt;/scripts</code></p>
  <pre><code>export function getScripts() {
    if (process.env.ENVIRONMENT === &quot;test&quot;) {
      return scriptSrc.test;
    } else if (process.env.ENVIRONMENT === &quot;prod&quot;) {
      return scriptSrc.prod;
    }
  }
  </code></pre>