Networking a NextJS development server in docker

I currently have a setup where I have a NextJS app in development mode in a docker-compose lets call frontend.

The backend is an expressjs app lets call backend.

I have an environment variable in my NextJS app that specifies the backend endpoint which I can either set as http://backend:3000 or http://localhost:3000. Depending on which endpoint I set, NextJS runs into an issue (client vs "server" side querying).

Is there a way I can access my backend from my host machine as well as frontend container using the same "url"?

Edited for clairty

version: "3.9"
services:
  frontend:
    image: node:18.14.2
    ports:
      - "8000:8000"
    volumes:
      - ./Frontend:/app
      #      - /app/node_modules/
      - /app/.next/
    environment:
      - NEXT_PUBLIC_BACKEND_BASE_URI=http://backend:3000
      - NEXT_PUBLIC_CMS_URL=http://cms:1337
    working_dir: /app
    command: sh -c "npm install --silent && npm run dev"
  frontend-graphql:
    image: node:18.14.2
    volumes:
      - ./Frontend:/app
      # - /app/node_modules/
      - /app/.next/
    environment:
      - NEXT_PUBLIC_BACKEND_BASE_URI=http://backend:3000
      - NEXT_PUBLIC_CMS_URL=http://cms:1337
    working_dir: /app
    command: sh -c "npm install --silent && npm run dev"
  backend:
    image: node:18.14.2
    ports:
      - "3000:3000"
    working_dir: /app
    volumes:
      - ./Backend:/app
    #      - /app/node_modules/
    command: sh -c "npm install && npm install -g ts-node && npm run dev"
  cms:
    image: node:18.14.2
    ports:
      - "1337:1337"
    working_dir: /app
    volumes:
      - ./CMS:/app
      - /app/node_modules/
    command: sh -c "npm install && npm install --platform=linux --arch=arm64v8 sharp && npm run dev"

The best solution I have found so far was hacking around the host.docker.internal hostname.

As mentioned before, host.docker.internal can be accessed directly inside of a docker container but as nextjs also needs to access the backend server from "outside" the container (in the browser) I mapped

127.0.0.1 to host.docker.internal 

in /etc/hosts (tested on both mac and windows).

This allows the client-side requests to access http://host.docker.internal:3000, allowing you to use the same hostname as the "server-side-queries".

I found this. It looks like we can easily set up server and public runtime configurations but I'm afraid it's been deprecated. Nevertheless, setting up server runtime configurations is still possible.

1. In next.config.js

const nextConfig = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    apiUrl: process.env.NEXT_SERVER_API_URL || 'http://dockerbackend:8000'
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    apiUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
  }
}

2. In @/config/index.ts

import getConfig from 'next/config';

const config = getConfig();

let apiUrl = process.env.NEXT_PUBLIC_API_URL;
if (config) {
  apiUrl = config?.serverRuntimeConfig?.apiUrl
}

export {
  apiUrl
}

3. Import the config file wherever you need the API URL:

import { apiUrl } from '@/config'