title: NextJS: Build once and get API Endpoints URL at runtime
body: <p>I am building a new NextJS app. Currently, I am in the stage of deploying the app to multiple environments like dev, qa, staging and prod. All the environments have just one change that it uses different endpoints for API.</p>
  <p>Now, I want to create a single dockerfile but use API_ENDPOINTS_URL based on the environment variable passed during the start command.</p>
  <p>All the examples that I am seeing online including NextJS documentation, people are using different build commands for different environments.</p>
  <pre><code>&quot;build:staging&quot;: &quot;cross-env NEXT_PUBLIC_APP_URL=staging.com next build&quot;,
  &quot;start:staging&quot;: &quot;cross-env NEXT_PUBLIC_APP_URL=staging.com next start&quot;,
  &quot;build:prod&quot;: &quot;cross-env NEXT_PUBLIC_APP_URL=production.com next build&quot;,
  &quot;start:prod&quot;: &quot;cross-env NEXT_PUBLIC_APP_URL=production.com next start&quot;,
  </code></pre>
  <p>Even the example mentioned in the NextJS github example uses 3 different dockerfiles for 3 different environments which is surprising.</p>
  <p><a href="https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env" rel="nofollow noreferrer">https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env</a></p>
  <p>Is it possible that I build the app once (one docker image) and send the API_URL as part of environment variable during the start command?</p>