Problem in docker-compose: App's container cannot communicate with NGINX container

Question

I'm new to docker so please don't judge me...

Basically I have a mono-repo with two applications:

A NestJS API, and a NextJS application

I'm setting up my development environment using docker, my docker-compose file is configured as follows:

version: "3.7"

services:
  api:
    build:
      context: ./
      dockerfile: docker/dev/api/Dockerfile
    container_name: site_api
    working_dir: /srv/app
    volumes:
      - .:/srv/app/
    networks:
      site-network:
        ipv4_address: 192.168.21.205
    ports:
      - "9229:9229"

  frontend-next:
    build:
      context: ./
      dockerfile: docker/dev/frontend-next/Dockerfile
    container_name: site_frontend_next
    working_dir: /srv/app
    volumes:
      - .:/srv/app/
    env_file:
      - .env
    networks:
      site-network:
        ipv4_address: 192.168.21.209

  nginx:
    image: nginx:1.25.3-alpine
    container_name: site_nginx
    working_dir: /srv/app
    volumes:
      - .:/srv/app/
      - ./nginx/local/:/etc/nginx/
    ports:
      - "${NGINX_PORT}:80"
    networks:
      site-network:
        ipv4_address: 192.168.21.208

networks:
  site-network:
    driver: bridge
    ipam:
      config:
        - subnet: 192.168.21.0/24

My nginx configuration file is set as follows

server {
    listen      80 reuseport default_server;
    listen      [::]:80 reuseport default_server;
    server_name sites;

    # security
    include                 nginxconfig.io/security.conf;

    # logging
    #access_log              /var/log/nginx/access.log combined buffer=512k flush=1m;
    error_log               /var/log/nginx/error.log warn;

    # additional config
    include nginxconfig.io/general.conf;

   # reverse proxy for Nest.js API
    location /api/ {
        proxy_pass            http://192.168.21.205:3000;
        proxy_set_header Host $host;
        include               nginxconfig.io/proxy.conf;
    }

    # reverse proxy for Next.js api
    location /next-api/ {
        proxy_pass http://192.168.21.209:3003/api/;
        proxy_set_header Host $host;
        include nginxconfig.io/proxy.conf;
    }

    # reverse proxy for Next.js frontend
    location / {
        proxy_pass            http://192.168.21.209:3003;
        proxy_set_header Host $host;
        include               nginxconfig.io/proxy.conf;
    }
}

These reverse proxies are used to direct calls correctly to the destination according to the following rule:

• If the call path prefix starts with /api it should reach the NestJS application

• If the call path prefix starts with /next-api it should reach the NextJS API endpoints located on /app/api folder

• The rest should go to the NextJS application frontend

• Nginx is available on localhost port 3000

So far so good, testing the external calls via postman by calling the endpoints, I get the desired redirection.

However, when trying to call the nginx server from within the NextJS application, through a simple function, for example:

const response = await axios.get(http://localhost:3000/api/endpoint);

or

const response = await axios.get(http://localhost:3000/next-api/endpoint);

I get the following error:

cause: [Error: connect ECONNREFUSED 127.0.0.1:3000] { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 3000 }

Searching on the internet Ifound that if I configure the extra_hosts of the frontend-next container to something like:

  frontend-next:
    build:
      context: ./
      dockerfile: docker/dev/frontend-next/Dockerfile
    container_name: site_frontend_next
    working_dir: /srv/app
    volumes:
      - .:/srv/app/
    env_file:
      - .env
    networks:
      site-network:
        ipv4_address: 192.168.21.209
    extra_hosts:
      -  "localhost:192.168.21.205" 

with 192.168.21.205 being the IP of the NestJS API container, I can reach the container correctly, but this solution is not ideal, since I cannot call the NextJS API. I tried mapping it to the Nginx IP as well, something like:

extra_hosts: - "localhost:192.168.21.208"

but then I get another type of error:

[AxiosError: Network Error] { message: 'Network Error'

from my understanding, the problem would be solved if the NextJS container could reach the NGINX container correctly, and from there the reverse proxy would be responsible for correctly routing the call, but I may be forgetting some important detail, if anyone can help me I would be extremely grateful!

Thank you for your attention