docker nginx proxy to linked container not working

I have tried this: NGINX reverse proxy not working to other docker container

and this: Docker nginx-proxy : proxy between containers

and followed nginx config from here: nginx proxy_pass to a linked docker container

I am simply trying to tell nginx to proxy to a linked api service on port 4000. I do not want to expose 4000 to host machine because there will be multiple services running on this port.

This is my docker-compose.yml:

version: '3'
services:
   api:
     build: ./api
     image: myapi:latest
     container_nameE: api
   api_nginx:
     image: nginx:latest
     container_name: api_nginx
     depends_on:
       - api
     links:
       - api
     ports:
       - "80:80"
     environment:
       - NGINX_SERVER_NAME:localhost
     volumes:
       - ./nginx:/etc/nginx/conf.d
...
...

and my nginx server is super minimal:

upstream backend {
   server api;
}
server {
   listen 80;
   listen [::]:80;
   server_name ${NGINX_SERVEE_NAME};
   location / {
      resolver 127.0.0.1;
      proxy_pass http://backend/$1;
   }
}

This is the error is throwing:

...[error] 20#20: *1 no resolver defined to resolve api, client: 172.23.0.1, server: ${nginx_server_name}....

and the page shows a 502 Bad Gateway

What is going on? I've followed other people's nginx configs and it's not working, I have no idea.