title: NextJS and environment variables - getting values to client side
body: <p>I apologize if this question has been answered before, but I'm banging my head against the wall here with something that should be simple ....</p>
  
  <p>My project is running in <code>server</code> mode. We need to be able to pass environment variables in at <strong>runtime</strong> and have them available on <strong>both</strong> server- and client-side</p>
  
  <p>I'm using the <code>publicRuntimeConfig</code> approach as described in the <a href="https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration" rel="noreferrer">docs</a> and I haven't done anything out of the ordinary (code to follow)</p>
  
  <p>The problem is when running in dev mode (<code>yarn dev</code>) everything works as expected, but when I build the project and dockerize it (or move it to kubernetes for deployment), it doesn't work correctly.</p>
  
  <p>Here's the code:
  <code>next.config.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const nextConfig = {
    publicRuntimeConfig: {
      PARAM_A: process.env.PARAM_A || "defaultA",
      PARAM_B: process.env.PARAM_B || "defaultB"
    }
  };
  
  module.exports = nextConfig;
  </code></pre>
  
  <p><code>_app.tsx</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import App, { AppContext } from "next/app";
  import Head from "next/head";
  import { Menu } from "../src/components/menu";
  
  
  class CustomApp extends App {
    static async getInitialProps({ Component, ctx }: AppContext) {
      let pageProps = {};
  
      if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
        console.log("[_app.tsx] pageProps", pageProps);
      }
  
      return { pageProps };
    }
  
    render() {
      const { Component, pageProps } = this.props;
  
      return (
        &lt;&gt;
          &lt;Head&gt;
            &lt;title&gt;Testing Area&lt;/title&gt;
          &lt;/Head&gt;
          &lt;Menu /&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default CustomApp;
  </code></pre>
  
  <p><code>index.tsx</code>, <code>otherpage.tsx</code> and <code>help.tsx</code> are identical apart from their wording, so I'll only put down <code>index.tsx</code> to save space:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import getConfig from "next/config";
  import { NextPageContext } from "next";
  
  class Index extends Component {
    static async getInitialProps(ctx: NextPageContext) {
      const nextConfig = getConfig();
      const clientConfig = (nextConfig &amp;&amp; nextConfig.publicRuntimeConfig) || {};
      const settings =  Object.keys(process.env).length &gt; 1 ? process.env : clientConfig;
      console.log("[INDEX PAGE] - nextConfig", nextConfig);
      console.log("[INDEX PAGE] - clientConfig", nextConfig.publicRuntimeConfig);
      console.log("[INDEX PAGE] - settings", settings);
      console.log("[INDEX PAGE] - process.env", process.env);
  
      return { settings };
    }
  
    render() {
      return &lt;div&gt;INDEX Page&lt;/div&gt;;
    }
  }
  
  export default Index;
  </code></pre>
  
  <p>When I run <code>yarn dev</code>, the output in the browser dev tools for this line
  <code>console.log("[INDEX PAGE] - nextConfig", nextConfig);</code>
  is as expected (note <code>PARAM_A</code> and <code>PARAM_B</code>):</p>
  
  <pre><code>[INDEX PAGE] - nextConfig 
  {serverRuntimeConfig: {…}, publicRuntimeConfig: {…}}
  serverRuntimeConfig: {}
  publicRuntimeConfig:
  PARAM_A: "mycustomAvalue"
  PARAM_B: "mycustomBvalue"
  __proto__: Object
  __proto__: Object
  </code></pre>
  
  <p>When I dockerize the project and provide the env variables, the output is as follows for all pages and nothing gets passed from server-side to client-side for <code>publicRuntimeConfig</code>:</p>
  
  <pre><code>[INDEX PAGE] - nextConfig 
  {serverRuntimeConfig: {…}, publicRuntimeConfig: {…}}
  serverRuntimeConfig: {}
  publicRuntimeConfig: {}
  __proto__: Object
  </code></pre>
  
  <p>The first page gets the values (because the getInitialProps is executed in _app.tsx) but whenever I navigate to any other page (Using next/link) I lose the variables.
  I need these values available across my app in all the pages. Please tell me I'm missing something obvious.</p>