mDNS (unknown device IP), Ningx, with restAPI backend url redirect without changing the url in the browser window

Question

Setup

Have a set of device(s) that will be placed on various networks with various IP designations. The device does backend stuff and provides 2 "services" to the user: a create react app user interface (at x.x.x.x:5000) for the novice user and a restAPI interface (at x.x.x.x:8000/docs) for the more knowledgeable.

Currently we (or the user) simply determines the IP address and adds a port to get to the above 2 instances and types them in the browser x.x.x.x:5000 or x.x.x.x:8000/docs and everyone is happy.

Trying to make it easier, so the user can just type: something_clever.local and it will auto redirect to those above 2.

I set up mDNS on the unit, something similar to https://github.com/lathiat/avahi/issues/40#issuecomment-592948612 where a service is started that determines the IP and "broadcasts" the mDNS message that something_clever.local resolves to x.x.x.x

Nginx is setup to serve the UI, the restAPI is setup in another manner (which may be part of the problem).

I have the react UI static "data" at /data/ui/build

cat /etc/nginx/sites-available/default:

server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /data/ui/build;

  location /{
  try_files $uri /index.html $uri/ =404;
}

and everything seems to work just fine for that, something_clever.local returns the static UI site, and the url in the browser remains something_clever.local.

Desire

I would like to be able to add a something (suffix?) to something_clever.local to access the restAPI, so the user doesn't have to remember 8000. Say something_clever.local/api would be placed in the browser url and what is typically shown with x.x.x.x:8000/docs is presented (BUT, what is in the url line doesn't change)

Problem

I seem to have a few approaches (I've scoured the web and they all result in 1 of these errors), approach 1 rewrites the url in the browser, which would be ok but isn't good human factors (ultimately they will see the port # and try to remember it instead of the desired suffix). Approach #2 "does something" but pulls a send() failed (111: Connection refused) while resolving, resolver: x.x.x.x:53... other errors: *2 open socket #xx left in connection x and 502 Bad Gateway.

Approach #1

works but re-writes the user's url to something_clever.local:8000/docs

location /api/{
proxy_pass http://something_clever.local:8000/docs/;
}

rewrite api http://something_clever.local:8000/docs redirect; also does the same thing.

Approach #2

determines the correct IP, but doesn't resolve it correctly?

error: send() failed (111: Connection refused) while resolving, resolver: x.x.x.x:53 why would it throw port 53 in there?

location /api/ {
    resolver something_clever.local;
    set $backend "http://something_clever.local:8000/docs";
    proxy_pass $backend;
}