Currently, I am in the process of developing my application with a next.js frontend and express.js backend. During development, I simply run the relevant dev servers in the terminal. However, now I am looking to deploy my app using Docker for production. In this setup, I want the IP of my API to be the name of the container instead of localhost. Additionally, I wish to use different ports for development and production.
During the development phase, I hardcoded rewrites in my code like so:
const nextConfig = {
reactStrictMode: true,
async rewrites() {
return [
{
source: "/api/:path*",
destination: `http://localhost:5000/api/:path*`,
},
{
source: "/auth/:path*",
destination: `http://localhost:5000/auth/:path*`,
},
];
},
};
module.exports = nextConfig;
This setup worked well during development. But as I transitioned towards production, I wanted the destination URL to be based on environment variables. For instance, in the dev environment, the destination for /api would be http://localhost:5000/api, while in production it should be http://api:5100/api (referring to the api Docker container).
Unfortunately, after some troubleshooting, I discovered that using environment variables in the next.config.js is not supported, as detailed in this GitHub issue: https://github.com/vercel/next.js/issues/21888.
Given this limitation, I am seeking advice on alternative methods to achieve environment-dependent rewrites since direct usage of environment variables is not feasible. Any suggestions or insights would be greatly appreciated.