[FIXED] How do I set environment variables to Next.js (SSR) after it is built?

Issue

I have this Next.js app (using SSR, using next start) which communicates with a server externally, and the server URL would have to be dynamic. This information, among other things, are dynamic variables that I would probably only have after initial deployment.

I have currently dockerized this Next.js app, so it gets built, then pushed to Docker Hub.

The "happy-flow" for the end user who would be using my app is that they should be able to pull the docker image of the prebuilt frontend, pass an env_file through docker-compose and just be able to use it as they wish.

All the examples (this and this) I've seen have explained how to pass ENV to Next.js but the ENV has to be passed during build time, which defeats the purpose of portability.

Solution

I was able to resolve this issue by making use of this package (react-env), which isn't the most ideal solution but works for now.

It has a couple of setup steps and opinionated configuration to it, but works as expected for anyone who's looking for a solution to pass env vars after the Next.js app has been built.

Answered By - Amruth Pillai

Answer Checked By - David Marino (PHPFixing Volunteer)