ECONNREFUSED api call to strapi from nextjs with nginx dockerdocker

Question

I have a docker container with strapi, nextjs and nginx. I have it set up so that if I navigate to front.development I hit the next front end and if I go to back.development I hit the strapi backend.

I can make a request to back.development/articles/some-article-title in postman and it works. However if I make a fetch or axios request to that same url in nextjs I get Error: connect ECONNREFUSED 127.0.0.1:80.

I'm stuck on how to resolve this. I've read the solution in a similar question here Can't call my Laravel API from the Node.js container but I can call it from Postman but trying that solution results in a 404.

docker-compose.yml

version: "3"
services:
  # NGINX reverse proxy
  nginx:
    image: nginx:1.17.10
    container_name: nginx_reverse_proxy
    restart: unless-stopped
    depends_on:
      - frontend
      - strapi
    volumes:
      - ./reverse_proxy/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80

  # NextJS Front end
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    restart: unless-stopped
    volumes:
      - ./frontend:/srv/frontend
      - /srv/frontend/node_modules
      - /srv/frontend/.next
    ports:
      - 3000:3000

  # Strapi CMS
  strapi:
    image: strapi/strapi
    container_name: strapi
    restart: unless-stopped
    env_file: .env
    environment:
      DATABASE_CLIENT: ${DATABASE_CLIENT}
      DATABASE_NAME: ${DATABASE_NAME}
      DATABASE_HOST: ${DATABASE_HOST}
      DATABASE_PORT: ${DATABASE_PORT}
      DATABASE_USERNAME: ${DATABASE_USERNAME}
      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
    volumes:
      - ./app:/srv/app
    ports:
      - 1337:1337

  # MongoDB database
  db:
    image: mongo
    container_name: db
    restart: unless-stopped
    env_file: .env
    environment:
      MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}
      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
    volumes:
      - strapidata:/data/db
    ports:
      - 27017:27017
networks:
  wellington-network:
    driver: bridge
volumes:
  strapidata:

Nginx config

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
  worker_connections 1024;
}

http {

  server {
    listen 80;
    server_name front.development;

    location / {
      proxy_pass http://frontend:3000;
      proxy_pass_request_headers on;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_redirect off;
    }    
  }

  server {
    listen 80;
    server_name back.development;

    location / {
      proxy_pass http://strapi:1337;
      proxy_pass_request_headers on;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_redirect off;
    }
  }
}