When trying to orchestrate my Next.js app + Express Application with docker-compose, I get an error trying to connect to the backend service. This is how my docker-compose file looks like

UPDATE: I got to connect to the backend service through the apiv4 number, but the connection times out. Most likely because of CORS. But I still can't access through localhost

version: "3.9"

services:
  client:
    restart: always
    build:
        context: ./frontend
        dockerfile: Dockerfile
    container_name: frontend_image
    volumes:
        - ./frontend:/app
        - /app/node_modules
    ports:
        - 3000:3000
    depends_on:
        - api
    networks:
        - express-api
    environment:
      API_BASE_URL: ${API_BASE_URL}
      API_PORT: ${API_PORT}

  api:
    restart: always
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: server_image
    ports:
      - 4000:4000
    volumes:
      - ./backend:/app
      - /app/node_modules
    networks: 
      - express-api
    environment:
      TOKEN_SECRET: ${TOKEN_SECRET}
      DB_NAME: ${DB_NAME}
      CLUSTER_PASSWORD: ${CLUSTER_PASSWORD}
      API_PORT: ${API_PORT}

  nginx:
    restart: always
    depends_on:
        - api
        - client
    build:
        context: ./nginx
        dockerfile: Dockerfile
    ports:
        - 8080:80
    networks:
        - express-api

networks:
  express-api:
    driver: bridge

And when I try accessing the API from my next app I get this:

Terminal next.js warning