title: Nextjs + Docker-Compose: how to resolve container hostname client-side?
body: <p>New to Docker here. I've been experiencing a confusing roadblock with my Nextjs app, which is running in its own container alongside API and database containers.</p>
  
  <p>My Nextjs app consumes data from the API container. This works great server-side: the Nextjs app resolves the container hostname as it should. Client-side, however, the app breaks because the container hostname means nothing to the browser (I think?). I'm rather lost as to how I can handle this. Ideas?</p>
  
  <p>Here's my Docker Compose file, in the case that it helps elucidate my question. Note that I'm passing the hostname to the Nextjs app via the <code>environment</code> field:</p>
  
  <pre><code>version: '3.8'
  
  services:
      # Redis 
      redis:
          image: redis
          command: redis-server --requirepass ${REDIS_PASSWORD} --bind redis
          ports:
              - "6379:6379"
          networks:
              - mywebappio
      # Data Processing Service
      mywebapp-api:
          container_name: mywebapp-api
          restart: always
          build: 
              context: packages/dps-api
              dockerfile: Dockerfile
          command: npm run dev # npm start prod
          working_dir: /usr/src/dps-api
          env_file: 
              - .env
          volumes: 
              - ./packages/dps-api:/usr/src/dps-api
          ports:
              - "5000:5000"
          networks:
              - mywebappio
          depends_on:
              - redis
      # SSR 'client' app
      nextjs:
          container_name: mywebapp-client
          build:
              context: packages/next-server
              dockerfile: Dockerfile
          command: /bin/bash -c "./wait-for-it.sh mywebapp-api:5000 -- npm run build &amp;&amp; npm run start"
          environment: 
              - NEXT_PUBLIC_API_BASE=mywebapp-api:5000
          volumes:
              - ./packages/next-server:/usr/src/app
          ports:
              - "3000:3000"
          networks:
              - mywebappio
          depends_on:
              - mywebapp-api
              - redis
  networks:
      mywebappio:
          driver: bridge
  </code></pre>
  
  <p>Additional information:</p>
  
  <ul>
  <li><p>Using <code>curl</code> on my API, as "localhost:5000", works. </p></li>
  <li><p>In dev console, Nextjs app makes a call to "localhost:3000/" to fetch data server-side. This makes sense given how Nextjs works.</p></li>
  <li><p>In dev console, Nextjs app makes call to "mywebapp-api:5000/" to fetch data client-side. Obviously, this doesn't work.</p></li>
  </ul>