title: Runtime configs in nextjs
body: <p>I'm trying to setup my nextjs app to use runtime configurations. Basically, I have an endpoint url that needs to be available trough docker env vars.
  I configured following these docs  but it isn't working. My app still using default values from .env file. Could anyone help to understand what I missed or did wrong?
  Thanks!</p>
  <p>docs:
  <a href="https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration" rel="nofollow noreferrer">https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration</a>
  <a href="https://nextjs.org/docs/advanced-features/custom-app" rel="nofollow noreferrer">https://nextjs.org/docs/advanced-features/custom-app</a></p>
  <p>steps:
  1- added to my next.config.js</p>
  <pre class="lang-js prettyprint-override"><code>publicRuntimeConfig: {
    NEXT_PUBLIC_BACKEND_HOST: process.env.NEXT_PUBLIC_BACKEND_HOST,
  },
  </code></pre>
  <p>2- retrieved config in my pages</p>
  <pre class="lang-js prettyprint-override"><code>const { publicRuntimeConfig } = getConfig()
  const baseURL = publicRuntimeConfig.NEXT_PUBLIC_BACKEND_HOST
  </code></pre>
  <p>3- created a custom app to setup getInitialProps</p>
  <blockquote>
  <p>Runtime configuration won't be available to any page (or component in a page) without getInitialProps.</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import App from 'next/app'
  
  function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;
  }
  MyApp.getInitialProps = async (appContext) =&gt; {
    const appProps = await App.getInitialProps(appContext);
    return { ...appProps }
  }
  export default MyApp
  </code></pre>