nextJS + ExpressJS with Apache reverse proxy results in "undefined" in url - node.js

Question

I'm trying to setup a nextJS + ExpressJS site on Apache. I've got a reverse proxy which forwards any request to http://1.23.45.67 (my ip at port 80) to localhost:3000 where my nodejs server is running. When I pull up the site in a browser everything looks fine. Images/css loads properly and I can navigate around the site but whenever an ajax request is made to the backend (e.g. api call to register a user) it does this with the request url http://1.23.45.67/undefined/api/v1/users/register.
My virtual host apache config looks like
<VirtualHost *:80>
ServerName www.myservername.com
ServerAlias myservername.com
DocumentRoot /var/www/myapp/html
ErrorLog /var/www/myapp/log/error.log
CustomLog /var/www/myapp/log/requests.log combined
ProxyRequests on
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
</VirtualHost>
I'm generating my ajax request url using a base url variable from a .env file.
I've also tried http://localhost/ and http://localhost:3000/ as the BASE_URL
# simplified .env file
...
BASE_URL=http://1.23.45.67/
...
# simplified register page where we make the ajax request.
...
fetch(`${process.env.BASE_URL}/api/v1/users/register`, {method: 'GET'});
...

Answer 1

For anyone who stumbles upon this...It's not an issue with apache config. The issue is how I'm using dotenv in nextjs. With my current project nextjs is grabbing the .env variables at buildtime and not runtime. The .env doesn't exist when when my github action compiles and pushes my code to the server so I get "undefined" in the url. I believe NextJS's publicRuntimeConfig is the solution. All .env variables used on the frontend need to be added as publicRuntimeConfig variables if you want them to be grabbed at runtime and not buildtime. https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration